/**
 * 页面加载效果
 */

class PageLoading extends HTMLElement {
    async connectedCallback() {
        await createScriptElement({ src: "components/templates/loading/index.css", name: "div-loading", type: "link" });
        this.innerHTML = `    
            <div class="loading">
                <div class="pageLoading" v-if="true">
                    <div class="out">
                        <div class="fade-in">
                            <div class="container">
                                <div class="one common"></div>
                                <div class="two common"></div>
                                <div class="three common"></div>
                                <div class="four common"></div>
                                <div class="five common"></div>
                                <div class="six common"></div>
                                <div class="seven common"></div>
                                <div class="eight common"></div>
                            </div>
                            <div class="tips">LOADING...</div>
                            <div class="bar">
                                <div class="progress"></div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>`

    }
}

customElements.define("div-loading", PageLoading);